<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜谱</title>
    <style>
        .list{
            float: left;
            margin-right:20px;
        }
        .list li{
            margin-bottom: 10px;
        }
        .list  p{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <select name="type" id="type">
            <option value="主菜">主菜</option>
            <option value="小菜">小菜</option>
            <option value="汤">汤</option>
        </select>
        <input type="text" id="name">
        <button id="addBtn">添加</button>
    </div>
    <div class="list">
        <p>主菜</p>
        <ul  id="main">
        </ul>
    </div>
    
    <div class="list">
        <p>小菜</p>
        <ul id="vege">
        </ul>
    </div>
    
    <div class="list">
        <p>汤</p>
        <ul id="soup">
        </ul>
    </div>
    

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        let cai = JSON.parse(localStorage.getItem('menu'));
        
        let getLi = function(name){
            let str = ""
            cai[name].forEach( e =>{
                str += `<li>${e.name}</li>`
            })
            return str 
        }
        
        $('#main').append(getLi('main'))
        $('#vege').append(getLi('vegetables'))
        $('#soup').append(getLi('soup'))

        $('#addBtn').on('click',function(){
            console.log()
            if( $('#type').val() && $('#name').val()){
                switch ($('#type').val()) {
                    case '主菜':
                        cai.main.push({name:$('#name').val()})
                        localStorage.setItem('menu', JSON.stringify(cai))
                        $('#main').empty()
                        $('#main').append(getLi('main'))
                        break;
                    case '小菜':
                        cai.vegetables.push({name:$('#name').val()})
                        localStorage.setItem('menu', JSON.stringify(cai))
                        $('#vege').empty()
                        $('#vege').append(getLi('vegetables'))
                        break;
                    case '汤':
                        cai.soup.push({name:$('#name').val()})
                        localStorage.setItem('menu', JSON.stringify(cai))
                        $('#soup').empty()
                        $('#soup').append(getLi('soup'))
                        break;
                }
            }else{
                alert('输入菜名并选择类型')
            }
        })
        $(".list").on('dblclick',function(event){
            if(event.target && event.target.nodeName == "LI") {
                let name = $(event.target).parent().attr('id')
                switch (name) {
                    case 'main':
                        cai.main.forEach((e,i) => {
                            if(e.name === event.target.innerHTML){
                                cai.main.splice(i,1)
                                localStorage.setItem('menu', JSON.stringify(cai))
                                $('#main').empty()
                                $('#main').append(getLi('main'))
                            }
                        })
                        break;
                    case 'vege':
                        cai.vegetables.forEach((e,i) => {
                            if(e.name === event.target.innerHTML){
                                cai.vegetables.splice(i,1)
                                localStorage.setItem('menu', JSON.stringify(cai))
                                $('#vege').empty()
                                $('#vege').append(getLi('vegetables'))
                            }
                        })
                        break;
                    case 'soup':
                        cai.soup.forEach((e,i) => {
                            if(e.name === event.target.innerHTML){
                                cai.soup.splice(i,1)
                                localStorage.setItem('menu', JSON.stringify(cai))
                                $('#soup').empty()
                                $('#soup').append(getLi('soup'))
                            }
                        })
                        break;
                }
            }
        })
    </script>
</body>
</html>